<template>
	<view class="task-card ss-flex-col">
		<view class="nav-bar ss-flex-row ss-row-left">
			<view class="nav-bar-item" :class="{'item-select':selectIndex==0,'item-unselect':selectIndex!=0}" @click="taskClick(0)">新手任务</view>
			<view class="nav-bar-item" :class="{'item-select':selectIndex==1,'item-unselect':selectIndex!=1}" @click="taskClick(1)">我的任务</view>
		</view>
		<view class="task-card-item ss-flex-row ss-row-between ss-col-center" v-if="selectIndex==0" v-for="(item,index) in data" :key="index">
			<view class="left ss-flex-row ss-row-left ss-col-center ss-m-t-25" >
				<view class="score ss-flex-col ss-col-center ss-row-center">
					<image :src="sheep.$url.cdn('/static/sign/jx.png')" class="score-img"></image>
					<view class="score-label">+{{item.points}}</view>
				</view>
				<view class="continue-desc ss-flex-col ss-row-left ss-col-top">
					<view class="continue">{{item.title}}</view>
					<view class="desc">{{item.details}}</view>
				</view>
			</view>
			<view class="right" :class="{'unselect':item.button.status==1,'select':item.button.status==0}" @click="goFinish(item)">{{item.button.text}}</view>
		</view>
		<view class="task-card-item ss-flex-row ss-row-between ss-col-center" v-if="selectIndex==1" v-for="(item,index) in day" :key="index">
			<view class="left ss-flex-row ss-row-left ss-col-center ss-m-t-25" >
				<view class="score ss-flex-col ss-col-center ss-row-center">
					<image :src="sheep.$url.cdn('/static/sign/jx.png')" class="score-img"></image>
					<view class="score-label">+{{item.points}}</view>
				</view>
				<view class="continue-desc ss-flex-col ss-row-left ss-col-top">
					<view class="continue">{{item.title}}</view>
					<view class="desc">{{item.details}}</view>
				</view>
			</view>
			<view class="right" :class="{'unselect':item.button.status==1,'select':item.button.status==0}" @click="goFinish(item)">{{item.button.text}}</view>
			
		</view>
	</view>
</template>

<script setup>
	
	import sheep from '@/sheep';
	
	import {ref, reactive, computed ,nextTick } from 'vue';
	
	const props = defineProps({
		data:{
			type:Object,
			default:{},
		},
		day:{
			type:Object,
			default:{},
		},
	})
	
	const selectIndex = ref(0);
	
	function taskClick(index){
		selectIndex.value = index;
	}
	
	function goFinish(item){
		if(item.button.status==0){
			sheep.$router.go(item.url);
		}
	}
	
</script>

<style lang="scss" scoped>
	.task-card{
		width:calc(100% - 30rpx - 30rpx - 23rpx - 18rpx);
		margin: 30rpx;
		padding:31rpx 23rpx 27rpx 18rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		.nav-bar{
			
			.nav-bar-item{
				height: 44rpx;
				font-family: Source Han Sans;
				font-size: 34rpx;
				line-height: normal;
				letter-spacing: normal;
				color: #1F1F1F;
				
			}
			
			.item-select{
				
				font-weight: 550;
			}
			
			.item-unselect{
				font-weight: normal;
			}
			
			.nav-bar-item:nth-child(1){
				margin-right: 35rpx;
			}
		}
		.task-card-item{
			margin-top:13rpx;
			.left{
				
				.score{
					max-width: 60rpx;
					width: 60rpx;
					height: 69rpx;
					border-radius: 10rpx;
					background: #E7F3FF;
					padding:3rpx 9rpx;
					.score-label{
						margin-top:6rpx;
						font-family: Source Han Sans;
						font-size: 24rpx;
						font-weight: 500;
						line-height: 35rpx;
						letter-spacing: normal;
						color: #9E9E9E;
						
						
						
					}
					.score-img{
						width: 24rpx;
						height: 22rpx;
					}
				}
				.continue-desc{
					margin-left: 18rpx;
					.continue{
						font-family: Source Han Sans;
						font-size: 30rpx;
						font-weight: 500;
						line-height: 43rpx;
						letter-spacing: normal;
						color: #1F1F1F;
					}
					.desc{
						margin-top:3rpx;
						font-family: Source Han Sans;
						font-size: 24rpx;
						font-weight: 35rpx;
						line-height: normal;
						letter-spacing: normal;
						color: #BDBDBD;
					}
				}
			}
			.right{
				margin-top:16rpx;
				width: 125rpx;
				height: 44rpx;
				border-radius: 100rpx;
				background: rgba(216, 216, 216, 0);
				box-sizing: border-box;
				
				font-family: Source Han Sans;
				font-size: 24rpx;
				font-weight: 500;
				line-height: 35rpx;
				letter-spacing: normal;
				
				display:flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				
				
				
			}
		}
	}
	
	.select{
		border: 1rpx solid #2B6EDE;
		color: #2B6EDE;
	}
	
	.unselect{
		border: 1rpx solid #B7B7B7;
		color: #9E9E9E;
	}
	
	
</style>